<script setup lang="ts">
import { configKey } from '@/api/earlyWarning';
import Dial from '@/components/Dial/index.vue';

defineProps(['mapData']);
const DialRef = ref();
const column = [
  {
    prop: 'materialTypeName',
    label: '物资类型',
    width: '120'
  },
  {
    prop: 'materialName',
    label: '物资名称',
    width: '120'
  },
  {
    prop: 'materialNum',
    label: '数量',
    width: '80'
  },
  {
    prop: 'materialSuffix',
    label: '单位',
    width: '80'
  }
];
const handleClick = async (phoneNumber) => {
  const { data } = await configKey('phone_number_url');
  DialRef.value.iframeUrl = data + phoneNumber;
  DialRef.value.open();
};
</script>

<template>
  <div class="card-box">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-descriptions :column="2" class="largeScreen-descriptions">
          <el-descriptions-item label="抢修队名称">{{ mapData.info.name }}</el-descriptions-item>
          <el-descriptions-item label="编码">{{ mapData.info.code }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ mapData.info.address }}</el-descriptions-item>
          <el-descriptions-item label="公司">{{ mapData.info.comName }}</el-descriptions-item>
          <el-descriptions-item label="子公司">{{ mapData.info.childComName }}</el-descriptions-item>
          <el-descriptions-item label="人数">{{ mapData.info.personNum }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ mapData.info.linUser }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">
            <span>{{ mapData.info.linTel }}</span>
            <svg-icon icon-class="phone" class="ml-5 phone" @click="handleClick(mapData.info.linTel)" />
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <div class="title">
          <el-row :gutter="10">
            <el-col :span="16" class="time-period">
              <span>应急资源</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-scrollbar height="200">
          <div class="table-box">
            <el-table
              :data="mapData.info.emergencyRepairMaterials"
              empty-text="暂无数据"
              :row-style="{ height: '50px' }"
              :cell-style="{ padding: '0px' }"
            >
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                :min-width="item.width"
                align="center"
                v-for="(item, index) in column"
                :key="index"
                show-overflow-tooltip
              >
                <template v-slot="scope">
                  <el-tag v-if="item.prop == 'materialTypeName'" effect="dark">{{ scope.row[item.prop] }}</el-tag>
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
  <Dial ref="DialRef" />
</template>

<style scoped lang="scss">
.card-box {
  width: 500px;
  min-height: 200px;

  .title {
    background: url('@/assets/largescreen/title-pic.png') no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 61px;
    line-height: 61px;
    padding-left: 20px;

    .time-period {
      color: white;
      font-family: PangMenZhengDao;
      font-size: 18px;
    }

    .escalate-records {
      color: #0be4f1;
      font-family: PangMenZhengDao;
      font-size: 18px;
      text-align: right;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .phone {
    cursor: pointer;
  }
}

.table-box {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    /* 全局样式中 */
    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    /* Scrollbar styles */
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;
  }

  .pagination-container.hidden {
    display: none;
  }

  :deep(.el-pagination__total) {
    color: #fff;
  }

  :deep(.el-pagination__jump) {
    color: #fff;
  }

  .el-button {
    color: white;
  }
}
</style>
